<html>
    <head>
        <title>Rubra</title>
        <link rel="stylesheet" href="css/reset.css" type="text/css"  />
        <link rel="stylesheet" href="css/grid.css" type="text/css" />
        <link rel="stylesheet" href="css/general.css" type="text/css" />
        <link rel="stylesheet" href="css/menu.css" type="text/css" />
		<link rel="stylesheet" href="css/forms.css" type="text/css" />
        <link rel="stylesheet" href="css/css3.css" type="text/css"  />
        <link rel="stylesheet" href="css/jquery-ui-1.8.17.custom.css" type="text/css" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />

        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/modernizr-1.7.min.js"></script>
        <script src="js/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/crocus/util/jquery.validate.extend.js"></script>	
        <script type="text/javascript" src="js/jquery-validate/localization/messages_es.js"></script>	
        <script type="text/javascript" src="js/jquery.serializeObject.js"></script>
        <script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.datalink2.js"></script>
        <script type="text/javascript" src="js/jquery.tmpl2.js"></script>
        <script type="text/javascript" src="js/jquery.mockjax.js"></script>
        
        <script>
            var persona_id = null;
            var persona;
            $(document).ready(function(){
                $("#mensaje").parent().hide();
                $(".button").button();
                $(".datepicker").live('click', function() {
	                $(this).datepicker({
	        	        showOn:'focus',
	        	        dateFormat : 'dd-mm-yy'
	        	        }).focus();
	                });
                
                var $form_persona = $("#form_persona");
                $form_persona.submit(function(){return false;});
                $form_persona.validate();
                
                $("#volver").click(function(){
                    window.location.href = "persona_listado.html";
                });
                
                
                
                $("#form_persona").hide();
            });
            
            
            function definirFormulario() {
                var $crear_actualizar = $("#crear_actualizar"); 
                $.dataLink( persona, "#form_persona").pushValues();
                $.dataLink( "#form_persona", persona );
                if (persona_id == null) {
                    $("#form_persona").show();
                    $crear_actualizar.click(crearPersona);
                } else {
                    jQuery.ajax({
                        type : 'GET',
                        url : '/app/persona/id/'+persona_id ,
                        contentType : 'application/json',
                        dataType : 'json',
                        success : servicioObtenerPersonaSuccessCallBack,
                        error : servicioObtenerPersonaErrorCallBack
    
                    });
                }
            }
            
            
            
            
           	function crearPersona(){
	            if (!$("#form_persona").valid()){
	                return false;
	            }  
	            jQuery.ajax({
                    type : 'POST',
                    url : '/app/persona',
                    contentType : 'application/json',
                    dataType : 'json',
                    data : $.toJSON(persona),
                    success : servicioIngresarPersonaSuccessCallBack,
                    error : servicioIngresarPersonaErrorCallBack
    
                });
	        }
	        function actualizarPersona(){
	            if (!$("#form_persona").valid()){
	                return false;
	            }  
	            jQuery.ajax({
                    type : 'PUT',
                    url : '/app/persona',
                    contentType : 'application/json',
                    dataType : 'json',
                    data : $.toJSON(persona),
                    success : servicioActualizarPersonaSuccessCallBack,
                    error : servicioActualizarPersonaErrorCallBack
    
                });
	        }
	        
	        
	        function servicioObtenerPersonaSuccessCallBack(data) {
	            jsonObjectMerge(data, persona);
                $crear_actualizar.click(actualizarPersona).text("Actualizar persona");
                $("#breadcrumb_actual").text("Actualizando "+persona.apellido + ", " + persona.nombre);
	            $("#form_persona").show();
	        } 
	        function servicioIngresarPersonaSuccessCallBack(data) {
	            jsonObjectMerge(data, persona);
	            servicioSuccessMensaje("#mensaje","La persona se ingres&oacute; correctamente en el sistema");
	            $("#crear_actualizar").click(actualizarPersona).text("Actualizar persona");
	            $("#breadcrumb_actual").text("Actualizando "+persona.apellido + ", " + persona.nombre);
	        } 
	        function servicioActualizarPersonaSuccessCallBack(data) {
	            jsonObjectMerge(data, persona);
	            servicioSuccessMensaje("#mensaje","La persona se actualiz&oacute; correctamente");
	        }
	        function servicioObtenerPersonaErrorCallBack(data) {
		        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al obtener informaci&oacute;n de la persona", data);
	        }
	        function servicioActualizarPersonaErrorCallBack(data) {
		        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al actualizar la informaci&oacute;n de la persona", data);
	        }
	        function servicioIngresarPersonaErrorCallBack(data) {
		        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al ingresar la la informaci&oacute;n de la persona", data);
	        }
        </script>
    </head>
    <body>
        <div class="head">
            <div class="row logo">
                <div class="col col_7">Rubra</div>
            </div>
            <div class="row">
        
                <ul class="menu">
                    <li><a href="#"><span>Administrador de eventos</span></a></li>
                    <li><a href="#" class="active"><span>Administrador de Personas</span></a></li>
                    <li><a href="#"><span>Administrador de usuarios</span></a></li>
                    <li><a href="#"><span>Eventos archivados</span></a></li>
                </ul>
                <div class="breadcrumb">
                    <span class="left"></span>
                      <ul>
                        <li><a href="#">Administrador de Personas</a></li>
                        <li><a href="persona_listado.html">Personas</a></li>
                        <li><a class="active" id="breadcrumb_actual">Ingresar Persona</a></li>
                      </ul>
                    <span class="right"></span>
                </div>        
            </div>
                   
        </div>
        <div class="content">
            <div class="row">
                <h2>Personas</h2>
                <div class="contenedor_mensaje col col_16">
		            <div  id="mensaje"></div>
	            </div>
            </div>
            <div class="row steps content_form">
                <div class="col col_3">&nbsp;</div>
                <div class="col col_10">
                    <form id="form_persona" name="form_persona">
			            <fieldset class="step s_column" id="seccion_persona">
				        <legend>Persona</legend>
				            <div>
					            <label for="persona.apellido">Apellido*</label> 
					            <input id="persona.apellido" name="persona[]apellido" type="text" class="required" data-jq-linkto="apellido" data-jq-linkfrom="apellido"/>
					            <input type="hidden" name="persona[]id" id="persona_id" data-jq-linkto="id" data-jq-linkfrom="id"/>
				            </div>
				            <div>
					            <label for="persona.nombre">Nombre*</label> 
					            <input id="persona.nombre" name="persona[]nombre" type="text" class="required"  data-jq-linkto="nombre" data-jq-linkfrom="nombre"/>
				            </div>
				            <div>
					            <label for="persona.tipoDoc">Documento(tipo)</label> 
					            <input id="persona.tipoDoc" name="persona[]tipoDoc" type="text" data-jq-linkto="tipoDoc" data-jq-linkfrom="tipoDoc"/>
				            </div>
				            <div>
					            <label for="persona.numeroDoc">N&uacute;mero de documento</label> 
					            <input id="persona.numeroDoc" name="persona[]numeroDoc" type="text" class="number" data-jq-linkto="numeroDoc" data-jq-linkfrom="numeroDoc"/>
				            </div>
				            <div>
					            <label for="persona.nacionalidad">Nacionalidad</label> 
					            <input id="persona.nacionalidad" name="persona[]nacionalidad" type="text" data-jq-linkto="nacionalidad" data-jq-linkfrom="nacionalidad" />
				            </div>
				            <div>
					            <label for="persona.fechaNacimiento">Fecha de nacimiento</label> 
					            <input id="persona.fechaNacimiento" name="persona[]fechaNacimiento" type="text" class="datepicker" data-jq-linkto="fechaNacimiento" data-jq-linkfrom="fechaNacimiento" />
				            </div>
				            <div>
					            <label for="persona.direccion">Direcci&oacute;n</label> 
					            <input id="persona.direccion" name="persona[]direccion" type="text" data-jq-linkto="direccion" data-jq-linkfrom="direccion" />
				            </div>
				            <div>
					            <label for="persona.ciudad">Ciudad</label> 
					            <input id="persona.ciudad" name="persona[]ciudad" type="text" data-jq-linkto="ciudad" data-jq-linkfrom="ciudad" />
				            </div>
				            <div>
					            <label for="persona.pais">Pa&iacute;s</label> 
					            <input id="persona.pais" name="persona[]pais" type="text" data-jq-linkto="pais" data-jq-linkfrom="pais"/>
				            </div>
				            <div>
					            <label for="persona.telefono">Tel&eacute;fono particular</label> 
					            <input id="persona.telefono" name="persona[]telefono" type="text" class="number" data-jq-linkto="telefono" data-jq-linkfrom="telefono"/>
				            </div>
				            <div>
					            <label for="persona.telefonoMovil">Tel&eacute;fono m&oacute;vil</label> 
					            <input id="persona.telefonoMovil" name="persona[]telefonoMovil" type="text" class="number" data-jq-linkto="telefonoMovil" data-jq-linkfrom="telefonoMovil"/>
				            </div>
				            <div>
					            <label for="persona.telefonoAlternativo">Otro tel&eacute;fono</label> 
					            <input id="persona.telefonoAlternativo" name="persona[]telefonoAlternativo" type="text" data-jq-linkto="telefonoAlternativo" data-jq-linkfrom="telefonoAlternativo"/>
				            </div>
				            <div>
					            <label for="persona.email">E-mail #1*</label> 
					            <input id="persona.email" name="persona[]email" type="text" class="required email" data-jq-linkto="email" data-jq-linkfrom="email"/>
				            </div>
				             <div>
					            <label for="persona.emailAlternativo">E-mail #2</label> 
					            <input id="persona.emailAlternativo" name="persona[]emailAlternativo" type="text" class="email" data-jq-linkto="emailAlternativo" data-jq-linkfrom="emailAlternativo"/>
				            </div>
				        </fieldset>
				        <button class="button" id="crear_actualizar">Crear </button>
                        <button class="button" id="volver" class="cancel">Volver al listado</button>
				    </form>
				    
                </div>
                <div class="col col_3">&nbsp;</div>
            </div>        
        </div>
        <div class="row footer">
        
        </div>
    </body>
</html>
